<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="商品名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="规格内容">
                <el-table :data="ruleForm.child" style="width: 100%">
                    <el-table-column label="规格名称">
                        <template #default="{ row }">
                            <el-form-item>
                                <el-input v-model="row.name" type="textarea" />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格值">
                        <template #default="{ row }">
                            <el-form-item>
                                <el-input v-model="row.value" type="textarea" />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="{row}">
                            <el-button link type="danger" size="small" @click="delParameter(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="addParameter">添加新参数</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { commodityParametersUpdate, commodityParametersAdd} from '@/api/goods.js'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: false, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    name: '',
    child: [
        {
            name: '',
            value: ''
        }
    ],
})

const rules = reactive({
    name: [
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})

const isHave = ref(false)

// 新增参数
const addParameter = () => {
    ruleForm.child.push({ name: '', value: '' })
}

// 删除参数
const delParameter = (row) => {
    if (ruleForm.child.length > 1) {
        const index = ruleForm.child.indexOf(row)
        if (index !== -1) {
            ruleForm.child.splice(index, 1)
        }
    } else {
        ElMessage({
            type: 'warning',
            message: '至少保留一个参数',
        })
    }
}

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                ruleForm.child.forEach(item => {
                    if (item.name == '' || item.value == '') {
                        ElMessage({
                            type: 'warning',
                            message: '请填写完整的参数信息',
                        })
                    } else {
                        isHave.value = true;
                    }
                })
                if (isHave.value) {
                    commodityParametersAdd(ruleForm).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '添加成功',
                            })
                            emit('closeOK')
                        }
                    })
                }
            } else {
                commodityParametersUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}


onMounted(() => {
    if (!props.isAdd) {
        ruleForm.name = props.row.name;
        ruleForm.child = props.row.child;
    }
})

</script>

<style lang="scss" scoped></style>